<!-- 我的资料 -->
<template>
  <view class="container ">
    <view class="list flex-c">
      <view class="item flex">
      <view class="l">更换头像</view>
      <view class="r flex">
        <text></text>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="item flex">
      <view class="l">昵称</view>
      <view class="r" @click="show = true">
        <text v-text="userInfo.username">昵称昵称</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="item flex">
      <view class="l">手机号</view>
      <view class="r">
        <text  v-text="userInfo.phone">12356478987</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="item flex">
      <view class="l">邮箱</view>
      <view class="r">
        <text v-text="userInfo.email">1235647@qq.com</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="item flex">
      <view class="l">AI金字塔开通时间</view>
      <view class="r">
        <text>2021-02-02</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="item flex">
      <view class="l">智能网络开通时间</view>
      <view class="r">
        <text>2021-02-02</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    </view>
    
    <view class="btn">
      <u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle">完成</u-button>
    </view>

    <u-popup v-model="show"  mode="bottom">
      <view class="content">
        <input v-model="nickname"   placeholder='填写昵称'/>
        <u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle">完成</u-button>
      </view>
			
		</u-popup>
  </view>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  data () {
    return {
      show:false,
      nickname:'',
      customStyle:{
        color:'#fff',
        width: '686rpx',
        height: '90rpx',
        backgroundColor:'#1488FF'
      }
    };
  },

  components: {},

  computed: {
    ...mapState('user', ['isLogin','userInfo']),
  },

  mounted() {
    console.log('show login', this.isLogin, 'userInfo', this.userInfo)
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
.container {
  min-height: 100vh;
  background-color: $b;
  padding: $p;
  .item {
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
    min-height: 80rpx;
    .l{
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .r {
      text{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  
  .btn {
    margin-top: 50rpx;
  }

}

.content {
  width: 750rpx;
  height: 468rpx;
  background: #FFFFFF;
  // border-radius: 20rpx 20rpx 0px 0rpx;
  padding: 100rpx 0 0 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /deep/ .u-input {
    width: 600rpx;
    height: 44rpx;
  }

}
</style>